<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" type="text/css" href="css/style6.css" />
		<script src="js/modernizr.custom.63321.js"></script>



		<link rel='stylesheet' href='css/reset.css'>
		<link rel="stylesheet" type="text/css" href="css/default.css">
		<link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
		<script src='js/prefixfree.min.js'></script>
		<style type="text/css">
			* {
				font-family: 'Roboto', sans-serif;
			}

			body {
				background: white;
			}

			button:focus {
				outline: none;
			}

			button:hover {
				background: #9b59b6;
			}

			h2 {
				font-size: 22px;
				line-height: 1.6;
				text-align: center;
				font-weight: 300;
				color: #777;
				font-family: 'Roboto', sans-serif;
				margin: 100px 0 0;
			}

			#button-wrapper {
				width: 450px;
				text-align: center;
				padding: 0 100px;
				box-sizing: border-box;
				-webkit-transition: .3s all ease .3s;
				transition: .3s all ease .3s;
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate3d(-50%, -50%, 0);
				transform: translate3d(-50%, -50%, 0);
			}

			button {
				width: 100%;
				background: #8e44ad;
				border: none;
				border-radius: 50px;
				padding: 5px 0;
				cursor: pointer;
				-webkit-transition: .3s all ease;
				transition: .3s all ease;
				position: relative;
			}

			button p {
				color: white;
				font-size: 18px;
				font-weight: 400;
				line-height: 40px;
				max-height: 40px;
				-webkit-transition: .3s all ease;
				transition: .3s all ease;
			}

			button .fill {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 0%;
				background: #8e44ad;
				border-radius: 50px;
			}

			button .fa {
				font-size: 25px;
				color: white;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				line-height: 50px;
				-webkit-transform: scale(0);
				-ms-transform: scale(0);
				transform: scale(0);
			}

			#button-wrapper.clicked {
				padding: 0;
			}

			#button-wrapper.clicked button {
				background: #ccc;
				margin-top: 25px;
			}

			#button-wrapper.clicked button p {
				max-height: 0;
				overflow: hidden
			}

			#button-wrapper.clicked button .fill {
				width: 100%;
				-webkit-transition: .3s all ease .3s;
				transition: 2s all ease .6s;
			}

			#button-wrapper.success button {
				margin: 0;
				padding: 25px;
				width: 50px;
			}

			#button-wrapper.success button .fa {
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
				-webkit-transition: .3s all ease .3s;
				transition: .3s all ease .3s;
			}
		</style>
	</head>

	<form action="surveyServlet6" method="post">
	<body>
		<div class="container">	
			<header class="clearfix">
				<h1>房屋推荐问卷<span>选择时请点击下拉选择菜单</span></h1>
				<nav class="codrops-demos">
					<a href="survey1.html">您的月收入</a>
					<a href="survey2.html">购房面积</a>
					<a href="survey3.html">购房地区位置</a>
					<a href="survey4.html">购房小区需求</a>
					<a href="survey5.html">购房楼层需求</a>
					<a class="current-demo" href="survey6_bak.html">楼层建造时间</a>
				</nav>
			</header>
			<section class="main">
				<div class="fleft">
					<p>请选择您所购目标房屋的建造时间：</p>
				</div>


					<div class="fleft">
						<select id="cd-dropdown"   name="cd-dropdown"  class="cd-select">
							<option value="-1" selected>请选择您的选项</option>
							<option value="1" class="icon-camera">2010年以前建造</option>
							<option value="2" class="icon-diamond">2010-2013年建造</option>
							<option value="3" class="icon-rocket">2013-2016年建造</option>
							<option value="4" class="icon-star">2016-2019年建造</option>
						</select>

					</div>


			</section>
		</div><!-- /container -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.dropdown.js"></script>
		<script type="text/javascript">
			
			$( function() {
				
				$( '#cd-dropdown' ).dropdown( {
					gutter : 5,
					stack : false,
					delay : 100,
					slidingIn : 100
				} );

			});

		</script>




		<div class="htmleaf-container">
			<div class="htmleaf-content">
				<div id="button-wrapper">
					<button type="submit">
						<p>提交</p>
						<div class="fill"></div>
						<div class="fa fa-check"></div>
					</button>
				</div>
			</div>
			<script src='/按钮/js1/jquery-1.11.0.min.js'></script>
			<script>
				(function () {
					'use strict';
					var $button = $('button');
					$button.on('click', function () {
						$(this).parent().addClass('clicked').delay(2600).queue(function () {
							$(this).addClass('success');
						});
					});
				}());
			</script>
		</div>
	</body>
	</form>
</html>
